<template>
	<view>
		<l-painter :css="`width: 600rpx;height: 1200rpx;`" isCanvasToTempFilePath
			@success="handleSuccess" custom-style="position: fixed; left: 200%">
			
			<l-painter-view
				css="background-color: #ffffff; position:absolute;width:100%;height: 1024rpx;border-radius: 14rpx; top: 0;left: 0;padding-top: -20rpx;">

				<l-painter-view>
					<l-painter-view css="width: 530rpx; display: inline-block;margin-top:26rpx">
						<l-painter-image :src="config.avatar"
							css="width: 80rpx;  height: 80rpx; border-radius: 50%;" />
						
							
							<l-painter-view css="line-height: 34rpx;position:absolute;left:100rpx;top:10rpx">
									<l-painter-text :text="'你好,我是'+config.nickname"
								css="color: #333333; font-size: 32rpx;font-weight: bold; " class="ellipsis"/>
							</l-painter-view>
							<!-- line-clamp:1;  在上面css中 -->
							<l-painter-view css="line-height: 34rpx;position:absolute;left:100rpx;top:46rpx">
								<l-painter-text  v-if="config.cname" :text="'送你“'+config.cname+'” '+config.money+'元优惠券'" css="color: #333333; font-size: 28rpx;" />
								<l-painter-text v-else :text="'送你“新人专享福利”'+config.yaoqingIntegral+'积分'" css="color: #333333; font-size: 30rpx;" />
							</l-painter-view>
					</l-painter-view>
					<!-- object-fit: cover;在下面css中 -->
					<l-painter-image :src="config.poster"
				css=" width: 600rpx;height: 880rpx; border-radius: 20rpx;position:absolute;left:0;top:126rpx" />
				</l-painter-view>
				
				<l-painter-view style="background-color: aqua;" css="margin: auto;width: 100%;position:absolute; bottom:50;">
				<!-- <l-painter-view css="position:absolute;bottom:150;left:102"> -->
						<l-painter-image :src="config.qrCode" css="width: 170rpx; height: 170rpx;margin: auto;" />
				</l-painter-view>
				
				
				
				
				<!-- <l-painter-view css="position:absolute;bottom:0;left:0"> -->
					<!-- <l-painter-view> -->
						<!-- #ifdef H5 || APP-PLUS -->
						<!-- <l-painter-qrcode css="width: 150rpx; height: 150rpx;" :text="config.link"> -->
						<!-- </l-painter-qrcode> -->
						 <!-- #endif -->
						<!-- #ifdef MP -->
						<!-- <l-painter-image :src="config.qrCode" css="width: 150rpx; height: 150rpx;" /> -->
						
						 <!-- #endif -->
<!-- 							<l-painter-view css="position:absolute;left:180rpx;bottom:130rpx">
								<l-painter-text :text="config.name"
								css="color: #333333; font-size: 26rpx;font-weight: bold; " />
							</l-painter-view>
							<l-painter-view css="position:absolute;left:180rpx;bottom:60rpx">
								<l-painter-text text="长按识别小程序码帮助好友助力" css="color: #333333; font-size: 22rpx;" />
							</l-painter-view> -->
					<!-- </l-painter-view> -->
				<!-- </l-painter-view> -->
				
				
				
				
			</l-painter-view>
		</l-painter>
		<!-- <l-painter-image :src="config.qrCode" css="width: 180rpx; height: 180rpx;" /> -->
		<!-- <l-painter-view css="margin-top: 20rpx;">
			<l-painter-text :text="`邀请码：${config.code}`" :css="`color: #FF2C3C; font-size: 28rpx;`" />
		</l-painter-view> -->
	</view>
</template>

<script>
	import lPainter from '@/components/lime-painter/components/l-painter/l-painter.vue'
	import lPainterImage from '@/components/lime-painter/components/l-painter-image/l-painter-image.vue'
	import lPainterText from '@/components/lime-painter/components/l-painter-text/l-painter-text.vue'
	import lPainterView from '@/components/lime-painter/components/l-painter-view/l-painter-view.vue'
	import lPainterQrcode from '@/components/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue'
	export default {
		name: "share-poster",
		components: {
			lPainter,
			lPainterImage,
			lPainterText,
			lPainterView,
			lPainterQrcode
		},
		props: {
			config: {
				type: Object,
				default: () => ({})
			},
			goodsId: {
				type: [Number, String],
				default: ''
			},
			qrcode: {
				type: [String],
				default: ''
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			handleSuccess(val) {
				this.$emit('success', val)
			}
		}
	}
</script>

<style>
</style>
